<template lang="html">
  <div class="jiegoumain">
    <ul class="jiegoulist">
      <li v-for="item in main">
        <p class="one">{{item.qs}}</p>
        <p class="two">{{item.dateline}}</p>
        <p class="three">{{item.number}}</p>
        <p class="ji" v-if="item.result=='藕'"><span>{{item.result}}</span></p>
        <p class="ou" v-if="item.result=='鸡'"><span>{{item.result}}</span></p>
      </li>
    </ul>
  </div>
</template>

<script type="text/javascript">
export default {
  props:["main"],
  data () {
    return {}
  },
  components:{
  }
}
</script>

<style scoped lang="less">
@import '../../assets/less/index.less';
.jiegoumain{
  width: 100vw;
  .jiegoulist{
    width: 100%;
    font-size: @h3_font_size;
    li{
      width: 100%;
      border-bottom: solid 1px @color2;
      overflow: hidden;
      zoom:1;
      p{
        display: inline-block;
        float: left;
        height: 10vw;
        line-height: 10vw;
      }
      .one{
        width: 25%;
      }
      .two{
        width: 40%;
      }
      .three{
        width: 20%;
      }
      .ji{
        width: 15%;
        span{
          display: inline-block;
          width: 10vw;
          height: 6vw;
          line-height: 6vw;
          margin-top: 2vw;
          border-radius: 1vw;
          color: @color1;
          background-color: @color;
        }
      }
      .ou{
        width: 15%;
        span{
          display: inline-block;
          width: 10vw;
          height: 6vw;
          line-height: 6vw;
          margin-top: 2vw;
          border-radius: 1vw;
          color: @color1;
          background-color: #3385ff;
        }
      }
    }
  }
}
</style>